<template>
  <van-pull-refresh v-model="refreshLoading" success-text="刷新成功" @refresh="onRefresh">
    <div class="home">
      <NavBar></NavBar>
      <!-- 轮播组件 -->
      <Swiper :images="swipeImgList" />
      <!-- 天气组件 -->
      <Wether />
      <!-- 功能栏 -->
      <Selector />
      <FeaturePicker></FeaturePicker>
      <van-tabs v-model:active="activeTab" shrink>
        <van-tab title="推荐">
          <lazy-component>
            <HomePlan v-if="AllNoteList.length" :allNoteList="AllNoteList" />
            <van-empty v-else image-size="0" description="还没有推荐数据嗷" />
          </lazy-component>
        </van-tab>
        <van-tab title="热榜"> 热榜 </van-tab>
        <van-tab title="攻略集"> 攻略集</van-tab>
        <van-tab title="指南"> 指南</van-tab>
      </van-tabs>
    </div>
  </van-pull-refresh>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
import { useStore } from "vuex";
import Swiper from "./components/Swiper.vue";
import Selector from "./components/Selector.vue";
import HomePlan from "./components/HomePlan.vue";
import Wether from "./components/Wether.vue";
import NavBar from "./components/NavBar.vue";
import FeaturePicker from "./components/FeaturePicker.vue";
import _ from "lodash";
// 尝试在客户端发起接口请求
// import { getNCWether } from "../../api/interface";

export default {
  components: { Swiper, Selector, HomePlan, Wether, NavBar, FeaturePicker },
  setup() {
    const store = useStore();
    const state = reactive({
      refreshLoading: false,
      swipeImgList: [],
      AllNoteList: [],
      activeTab: 0,
    });
    onBeforeMount(async () => {
      await store.dispatch("_getJsonInfo");
      await store.dispatch("_getUserInfo");
      await store.dispatch("_getAllNote");
      state.swipeImgList = store.state.swipeImgList;
      state.AllNoteList = store.state.allNote;
    });
    const onRefresh = async () => {
      await store.dispatch("_getJsonInfo");
      await store.dispatch("_getUserInfo");
      await store.dispatch("_getAllNote");
      state.swipeImgList = store.state.swipeImgList;
      state.AllNoteList = store.state.allNote;
      state.refreshLoading = false;
    };

    return {
      ...toRefs(state),
      onRefresh,
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  overflow-y: scroll;
  background-color: #fff;
  text-align: center;
  ::v-deep(.van-tabs__line) {
    background: rgb(47, 125, 226);
  }
}
</style>
